<template>
  <div class="content">
  <!-- 写内容 -->
  <!-- 是目录 -->
  <div class="weui-flex">
        <div class="weui-flex__item live" v-on:click="show()">
             <div class="placeholder">
                生活食品
                <img src="img/sartA.jpg" class="sartG">
             </div>
        </div>
        <div class="weui-flex__item" @touchend="sortFn()">
            <div class="placeholder" id="price">
                <span>价格从高到低</span>
                <img src="img/sartG.jpg" class="sartG">
            </div>            
        </div>
        <div class="weui-flex__item">
            <div class="placeholder">
                销量优先
                <img src="img/sartG.jpg" class="sartG">
            </div>
        </div>
   </div>
   <!-- 1.分类 -->
    <!-- 原森 -->
     
      <div class="classfiy" @touchend="show()">
        <p v-for="obj in title"><span v-on:click="classCon(obj.name)">{{obj.name}}</span></p>
      </div>
   <!-- 列表  -->
   <ul class="list" id="lists" ref="lists">
     <li v-for="obj in items">
        <a href="detail.html?id={{obj.id}}">
           <div class="listImg"><img v-bind:src=obj.src alt=""></div>
           <div class="price">
              <p>{{obj.title}}</p>
              <div class="fontSpan">
                 <span class="red">¥{{obj.newPrice}}</span>
                 <span>
                    原价:<s>¥{{obj.oldPrice}}</s>
                 </span>
              </div>
           </div>
        </a>
     </li>
     <li class="add"></li>
   </ul>


  </div>
      <!-- 具体类型 -->
   <div class="show">
      <p class="middle">
        <span class="showDel" v-for="obj in title.detail">{{obj.detail.con}}</span>
      </p>
   </div>
</template>

<script>
let $classfiy = $(".classfiy");
let $show = $(".show");
var data = [{name:"美食"},
            {name:"美酒"},
            {name:"家具"},
            {name:"百货"},
            {name:"美食"},
            {name:"美酒"},
            {name:"家具"},
            {name:"百货"}];
export default {
  data:function(){//数据
    return {
      title:data,
      items:[],
      animateBol:false,
      top:false,
      }
  },
  methods:{
    show:function(){//点击菜单的是让菜单有动画效果的滑下来,再点击就让它动画的消失
      this.animateBol = !this.animateBol;
      var $classfiy = $(".classfiy");
      var $show = $(".show");
      if (this.animateBol) {
        $classfiy.stop().slideDown(500);
        $show.show();
      }else{
        $classfiy.stop().slideUp(500);
        $show.hide();
      }
    },
    classCon:function(con){//点击菜单的时候,就让他显示再消失
        var $classfiy = $(".classfiy");
        var _this = this;
        $classfiy.find("p").on("click",function(){
              localStorage.setItem("titleName",con);//用本地存储
              setTimeout(function(){//请求数据有一个时间
                  _this.ajaxFn();//重新请求数据
              })
               
              setTimeout(function(){//点击完毕,就让他们消失
                  $classfiy.hide();
                  $(".show").hide();
              },200)
        })
    },
    ajaxFn:function(){
        var con = localStorage.getItem("titleName");
        if (con==null) {con = "美食";}
        var _this = this;//this和ajax里面的this是不一样的
        $.ajax({
            type:"GET",
            url:"http://172.16.18.43/classfiy/classfiy.php?cb=JSON_CALL&con="+con,
            jsonp:"cb",
            dataType:"jsonp",
            success:function(data){
                var arr = [];
                for (var i = 0;i < data.length;i++) {
                  arr.push(data[i]);
                  // var src = require(str);//照片需要require,不需要require，直接放在public文件夹
                }
                _this.items = arr; 
            }
        })
    },
    sortFn:function(){
        this.top = !this.top;
        if (this.top) {
            $("#price>span").text("价格从低到高")
        }else{
            $("#price>span").text("价格从高到低")
        }
        this.items = this.items.sort(this.compale('newPrice',this.top));
    },
    compale:function(attrs,bol){
        return function(a,b){
          var v1 = a[attrs];
          var v2 = b[attrs];
          if (bol) {//从低到高
              return v1-v2;
          }else{//从高到低
              return v2-v1;
          }
          
        }
    }
  },
  ready:function(){
        this.ajaxFn();//默认的请求数据
        var $li = $(".headList li");
        $li.on("click",function(){
            $li.each(function(i){
               $li.eq(i).find("a").removeClass("redAct");
            })
            $(this).find("a").addClass("redAct");
        })
    }
  
}


</script>

<style scoped>
body,html{
  background-color: #f2f2f2;
  height: 100%;

}
.content{
  position: relative;
  width: 100%;
  height: 100%;
}
.weui-flex{
  position: fixed;
  width: 100%;
  background: white;
  z-index: 1005;
  border-bottom: 1px solid #f2f2f2;
}
.weui-flex__item{
  font-size: 0.15rem;
  text-align: center;
  color: #666;
  line-height: 0.45rem;
}
.weui-flex__item:nth-child(1){
  color: #f29004;
}
.placeholder img{
  width: 8%;
  padding-left: 5%;
}
.classfiy{
  font-size: 0.15rem;
  color: #333;
  clear: both;
  border-top: 1px solid #f2f2f2;
  padding: 2% 0;
  position: fixed;
  width: 100%;
  z-index: 1002;
  box-sizing: border-box;
  box-sizing: content-box;
  background: white; 
  display: none;
  margin-top: 12%;
}
.classfiy p{
  width: 21%;
  float: left;  
  text-align: center;
  background: #f2f2f2;
  border-radius: 5%;
  padding: 2% 1%;
  margin: 1%;

}

.show{
  position: absolute;
  z-index: 1000;
  top: 15%;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  padding: 10% 3%;
  display: none;
}
.show .showDel{
  padding: 1% 2%;
  text-align: center;
  font-size: 0.18rem;
  color: white;
  border:1px solid white;
  display: inline-block;
  border-radius: 5px;
  margin: 2%;
}
/*列表样式*/
.list{
  width: 97%;
  padding:1.5%;
  background-color:#f2f2f2!important;
  position: absolute;
  margin-top: 12%;
}
.list a{
  text-decoration: none;
}
.list li{
  list-style: none;
  width: 47%;
  float: left;
  margin:1.4%;
  background: white;
}
.listImg{
  width: 100%;
  height: 1.8rem;
}
.listImg img{
  width: 100%;
}
/*列表价格样式*/
.price{
  padding:0 5%; 
}
.price p{
  color: #1a1a1a!important;
  font-size: 0.17rem;
  height: 0.5rem;
  /*overflow: hidden;
  white-space:nowrap;
  text-overflow: ellipsis;*/
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.price .fontSpan{
    padding-top: 5%;
}
.price span{
  padding-top: 5%;
}
.price span{
  font-size: 0.14rem;
  color: #666;
}
.red{
  color: #de0000!important;
  font-size: 0.15rem!important;
  margin-right: 0.1rem;
}
.add{
  background: #f2f2f2!important;
  padding: 12%;
}
</style>
